<script setup>

import { ref } from "vue";

const show = ref(false);
const showPopup = () => {
  show.value = true;
};

const popupList=ref(['首页','都市','科幻','历史','悬疑','穿越','重生','游戏','仙侠','武侠']);
const n=ref(0);

</script>

<template>
  <div class="popup">

    <van-cell title="热门分类" is-link @click="showPopup" />
    
    <!-- 右侧弹出 -->
    <van-popup
      close-icon-position="top-left"  
      v-model:show="show"
      position="right"
      closeable
      :style="{ width: '50%', height: '100%' }"
    >
      <div class="popupList">
        <h4>热门分类</h4>
        <ul>
          <li v-for="(v,i) in popupList" :key="i" :class="n==i?'active':''" @click="n=i">{{ v }}</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<style>

.popup{
  height: 30px;
}

.popupList{
  text-align: center;
  padding: 1rem;
}

.popupList h4{
  padding: 1rem;
}

.popupList ul{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}

.popupList ul li{
  background-color: #F1F1F1;
  border-radius: 5px;
  padding: 10px 0;
}

.popupList .active {
  background-color:yellow;
  color:blue;
  font-weight: bolder;
}


</style>
